<script setup>

import api from "@/api/workflow/flow.js";

const detailInfo = inject('detailInfo');
const list = ref([]);


if (detailInfo.value.flowId) {
  getList(detailInfo.value.flowId);
}

function getList(flowId) {
  api.listTask(flowId).then((res) => {
    list.value = res;
  })
}

watch(detailInfo, (value) => {
  if (!value || !value.flowId) {
    list.value = [];
    return;
  }
  const flowId = value.flowId;
  getList(flowId);

})

</script>

<template>
  <div class="progress">
    <template v-if="list && list.length && list.length > 1">
      <div  v-for="item in list" class="item start">
        <div class="topbar">
          <span class="title">{{ item.name }}</span>
          <span v-if="!item.taskType" class="dateTime">{{ item.startTime }}</span>
          <template v-if="item.taskType===2">
            <span v-if="item.auditRule === 1" class="tag">或签</span>
            <span v-if="item.auditRule === 2" class="tag">会签</span>
          </template>

        </div>
        <div class="users">
          <div class="box" v-for="u in item.auditUser">
            <div class="avatar">
              <div class="wrap">
              <span class="avatar el-avatar el-avatar--icon el-avatar--circle"
                    style="height: 24px; width: 24px; line-height: 24px;">
                <i class="el-icon-user-solid"></i>
              </span>
              </div>
              <i v-if="u.approveFlag" class="icon el-icon-success"></i>
            </div>
            <div class="name">{{ u.userName }}</div>
          </div>
        </div>
        <div class="recordList">
          <div v-for="r in item.approveList" class="record"
               style="border: 1px solid rgb(225, 243, 216); background-color: rgb(240, 249, 235);">
            <div data-v-21087e23="" class="row">审批人：{{r.userName}}</div>
            <div data-v-21087e23="" class="row">审批时间：{{r.operateTime}}</div>
            <div data-v-21087e23="" class="row">审批意见：{{r.remark}}</div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="el-empty noProgress"><div class="el-empty__image"><svg viewBox="0 0 79 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient-1-1" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#EEEFF3" offset="100%"></stop></linearGradient><linearGradient id="linearGradient-2-1" x1="0%" y1="9.5%" x2="100%" y2="90.5%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#E9EBEF" offset="100%"></stop></linearGradient><rect id="path-3-1" x="0" y="0" width="17" height="36"></rect></defs><g id="Illustrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="B-type" transform="translate(-1268.000000, -535.000000)"><g id="Group-2" transform="translate(1268.000000, 535.000000)"><path id="Oval-Copy-2" d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z" fill="#F7F8FC"></path><polygon id="Rectangle-Copy-14" fill="#E5E7E9" transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) " points="13 58 53 58 42 45 2 45"></polygon><g id="Group-Copy" transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"><polygon id="Rectangle-Copy-10" fill="#E5E7E9" transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) " points="2.84078316e-14 3 18 3 23 7 5 7"></polygon><polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"></polygon><rect id="Rectangle-Copy-12" fill="url(#linearGradient-1-1)" transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) " x="38" y="7" width="17" height="36"></rect><polygon id="Rectangle-Copy-13" fill="#F8F9FB" transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) " points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"></polygon></g><rect id="Rectangle-Copy-15" fill="url(#linearGradient-2-1)" x="13" y="45" width="40" height="36"></rect><g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)"><mask id="mask-4-1" fill="white"><use xlink:href="#path-3-1"></use></mask><use id="Mask" fill="#E0E3E9" transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) " xlink:href="#path-3-1"></use><polygon id="Rectangle-Copy" fill="#D5D7DE" mask="url(#mask-4-1)" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) " points="7 0 24 0 20 18 -1.70530257e-13 16"></polygon></g><polygon id="Rectangle-Copy-18" fill="#F8F9FB" transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) " points="62 45 79 45 70 58 53 58"></polygon></g></g></g></svg></div><div class="el-empty__description"><p>该单据无需审批</p></div><!----></div>
    </template>

  </div>
</template>

<style scoped lang="scss">

.progress {
  height: 100%;
  padding-left: 20px;

  .item {
    &:first-child:before {
      height: calc(100% - 16px);
    }

    &:before {
      content: "";
      width: 1px;
      height: calc(100% + 30px);
      background-color: #ebeef5;
      position: absolute;
      bottom: 0;
      left: -20px;
    }

    border-radius: 6px;
    padding: 10px 0;
    position: relative;

    .topbar {
      &:before {
        content: "";
        width: 10px;
        height: 10px;
        background-color: #fff;
        border: 3px solid #005bf5;
        border-radius: 50%;
        position: absolute;
        top: 14.5px;
        left: -25.5px;
        z-index: 1;
      }

      height: 20px;
      display: flex;
      align-items: center;

      .title {
        font-size: 13px;
        color: #0b1019;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
      .dateTime {
        line-height: 1;
        font-size: 13px;
        color: #909399;
        margin-left: 12px;
      }
      .tag {
        line-height: 1;
        font-size: 12px;
        color: #005bf5;
        border: 1px solid #005bf5;
        border-radius: 4px;
        padding: 4px 4px;
        margin-left: 8px;
        letter-spacing: 1px;
        transform: scale(.9);
        flex-shrink: 0;
      }
    }

    .users {
      padding-top: 4px;
      display: flex;
      flex-wrap: wrap;

      .box {
        width: 60px;
        margin-top: 10px;

        .avatar {
          margin: 0 auto;
          display: flex;
          justify-content: center;
          position: relative;

          .wrap {
            width: 40px;
            height: 40px;
            background-color: #c0c4cc;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

          }

          .icon.el-icon-success {
            color: #67c23a;
          }

          .icon {
            font-size: 14px;
            border: 1px solid #fff;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            bottom: 0;
            right: 5px;
          }
        }

        .name {
          width: 100%;
          font-size: 12px;
          text-align: center;
          margin-top: 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .recordList {
      margin-top: 12px;

      .record {
        width: 100%;
        line-height: 22px;
        font-size: 12px;
        color: #0b1019;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 10px;
        margin-top: 10px;
        overflow-y: auto;
      }
    }
  }
}

</style>